<template>
  <div id="nav">
    <el-container :direction="'vertical'">
      <el-header height="60px">
        <!-- Header content -->
        <el-menu mode="horizontal" default-active="" :router="true">
          <menus-item :subMenus="menus"></menus-item>
          
          <div class="user-block" @click="changeUserBlock">
            <el-avatar icon="el-icon-user-solid" size="small" shape="circle" fit="fill"></el-avatar>
          </div>
          
        </el-menu>
      </el-header>

      <div class="user-container" v-show="showUser">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <div class="user-info">
            <el-avatar icon="el-icon-user-solid" size="large" shape="circle" fit="fill"></el-avatar>
            <template v-if="isLogin">
              <span class="user-name" v-text="user.name"></span>
              <span class="user-role" v-if="user.role == 0">管理员</span>
              <span class="user-role" v-if="user.role == 1">SEO</span>
              <span class="user-role" v-if="user.role == 2">作者</span>
              <span class="btn">
                <el-button type="danger" size="small" @click="storeLogout()">退出登陆</el-button>
                <el-button type="primary" size="small" @click="personInfo()">个人信息</el-button>
                
              </span>
            </template>
            <template v-if="!isLogin">
              <span class="user-name">请登录</span>
              <span class="btn">
                <el-button type="primary" size="small" @click="userLogin">登陆</el-button>
              </span>
            </template>
            
          </div>
        </el-card>
      </div> 
      <el-container :direction="'vertical'">
        <el-main height="">
          <!-- Main content -->
          

          <router-view></router-view>

          <el-card shadow="always" :body-style="{ padding: '20px'}" v-if="user.role == 0">
            <template #header>
              <span>接口测试</span>
            </template>
            <!-- card body -->
            <div style="margin: 0 0 20px 0">
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- card body -->
                {{message}}
              </el-card>
            </div>
            
            
            <el-button-group>
              <el-button type="primary" size="small" @click="apiTest1" >index</el-button>
              <el-button type="primary" size="small" @click="apiTest2" >delete cookie</el-button>
              <el-button type="primary" size="small" @click="apiTest3" >check user status</el-button>
              <el-button type="primary" size="small" @click="apiTest4">user info</el-button>
              <el-button type="primary" size="small" @click="apiTest6">get log length</el-button>
            </el-button-group>
            
          </el-card>
          
          
        </el-main>
        <el-footer height="60px">
          <!-- Footer content -->
        </el-footer>
      </el-container>
    </el-container>

    <div class="user-login" v-show="showLogin">
      <el-card shadow="hover" :body-style="{ padding: '40px' }" v-loading="loading">
        <div>
          <el-form label-position="left" label-width="40px" :model="userLoginForm">
            <el-form-item label="用户">
              <el-input v-model="userLoginForm.name" prefix-icon="el-icon-s-custom"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
              <el-input :type="showPwd ? 'text': 'password'" v-model="userLoginForm.pwd" prefix-icon="el-icon-lock"></el-input>
              <i class="el-icon-view" style="position: absolute; right: 1rem; top: 1rem;" @click="showPwd=!showPwd"></i>
            </el-form-item>
            <div class="user-login-btn">
              <el-button type="primary" size="large" @click="loginSubmit">登陆</el-button>
              <el-button type="danger" size="large" @click="showLogin = false">取消</el-button>
            </div>
          </el-form>
        </div> 


      </el-card>
      
      
    </div>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'
import MenuItem from '@/components/MenuItem'
import md5 from 'js-md5'
import { user, userCheck } from '@/api/user.js'
import { adminUser, testApi } from '@/api/content.js'

export default {
  components: {
    'menus-item': MenuItem
  },
  data(){
    return {
      showUser: false,
      showLogin: false,
      userLoginForm : {
        name: "",
        pwd: "",
      },
      showPwd: false,
      loading: false,
      message: "init",
    }
  },
  methods: {
    ...mapMutations ([
      'storeLogout',
    ]),
    ...mapActions ([
      'storeCheckLoginStatusAction'
    ]),
    getFromAu(){
      console.log('tag', this.$store.state.au.users);
    },
    changeUserBlock(){
      this.showUser = !this.showUser;
    },
    userLogin(){
      this.showUser = false;
      this.showLogin = true;
    },
    personInfo(){
      this.$router.push('/person');
    },
    async loginSubmit(){
      this.loading = true;

      let userInfo = {
        pwd : md5(this.userLoginForm.pwd),
        name : this.userLoginForm.name,
      }

      let data = await user.login(userInfo.name, userInfo.pwd);
      this.loading = false;
      switch(data.status){
        case 200:
          this.$message({
            showClose: true,
            message: '登陆成功！',
            type: 'success'
          });
          this.showLogin = false;
          this.storeCheckLoginStatusAction();
          break;
        default:
          this.$message({
            showClose: true,
            message: data.msg,
            type: 'error'
          });
      }
      
    },
    async apiTest1(){
      this.message = 'waiting . . .'
      let data = await userCheck.apiTest()
      this.message = data;
      
    },
    async apiTest2(){
      this.message = 'waiting . . .'
      this.storeLogout();
      this.message = this.isLogin;
      
    },
    async apiTest3(){
      this.message = 'waiting . . .'
      let data =  await userCheck.checkUserStatus();
      this.message = data;
    },
    async apiTest4(){
      this.message = 'waiting . . .'
      let data =  await user.login('lyx', md5('123123'));
      this.message = data;
    },
    async apiTest5(){
      this.message = 'waiting . . .'
      let user = {
        'user_name': 'test',
        'name': 'test',
        'pwd': md5('test'),
        'is_super': 1,
        'is_lock': 0,
        'role': 1,
      }
      let data = await adminUser.addUser(user);
      this.message = data;
    },
    async apiTest6(){
      this.message = 'waiting . . .';
      let data = await testApi.getLogLength()
      this.message = data;
    }
  },
  async created(){
    await this.$store.dispatch('storeCheckLoginStatusAction').catch(()=>{
      setTimeout(()=>{
        this.$message({
            showClose: true,
            type: "error",
            message: "请登录"
          })
      }, 1000)
    })
  },
  computed: {
    ...mapState([
      'menus',
      'isLogin',
      'user'
    ])
  },
}
</script>

<style lang="scss">
body {
  background-color: #f1f1f1;
  padding: 0;
  margin: 0 !important;
}


.user-block {
  float: right;
  display: flex;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-color: rgba(133,133,133,0.4);
  opacity: 1;
  outline: none;
  justify-content: center;
  align-items: center;
  margin: 10px 30px 10px 0;
  &:hover {
    opacity: 0.7;
  }
  &:focus {
    opacity: 0.7;
  }
}
.user-container {
  position: absolute;
  z-index: 100;
  top: 70px;
  right: 0px;
  width: 300px;
  height: 400px;
  .el-card {
    height: 300px;
  }
  .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 240px;
    .el-avatar--large {
      width: 80px;
      height: 80px;
      line-height: 80px; 
    }
    .el-avatar--icon {
      font-size: 40px;
    }
    .user-name {
      display: block;
      font-weight: 600;
      font-size: 20px;
      color: #ccc;
      margin: 15px;
    }
    .user-role {
      display: block;
      font-size: 16px;
      color: #ccc;
      margin-bottom: 15px;
    }
  }
}
.user-login {
  position: absolute;
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  .el-icon-view {
    cursor: pointer;
  }
  .user-login-btn {
    width: 70%;
    margin: 0 auto;
    display: flex; 
    justify-content: center;
    align-items: center;
    .el-button {
      flex: 1;
    }
  }
}
</style>
